<template>
  <div>
    <van-nav-bar left-arrow title="钱包">
      <template #left>
        <van-icon name="arrow-left" @click="$router.back()" />
      </template>
    </van-nav-bar>
    <!-- <van-notice-bar mode="closeable">满100元可提现。</van-notice-bar> -->
    <div class="yue">
      <p>我的余额</p>
      <h3>{{ myMoney }}</h3>
    </div>
    <!-- 选择数值按钮 -->
    <span class="span">请选择金额</span>
    <van-row
      type="flex"
      justify="space-around"
      style="padding: 10px 0; text-align: center"
    >
      <van-col
        span="5"
        v-for="(item, index) in moneys1"
        :key="index"
        @click="dian1(item, index)"
        :class="{ dian: num1 == index }"
      >
        <van-button type="default">{{ item }}</van-button>
      </van-col>
    </van-row>
    <!-- 充值提现按钮 -->
    <van-row
      type="flex"
      justify="space-around"
      style="text-align: center; margin-top: 20px"
    >
      <van-col span="20" @click="chong">
        <van-button type="info">充值</van-button>
      </van-col>
    </van-row>
    <!-- 支付方式 -->
    <div class="bottom">
      <span>请选择您需要的支付方式</span>
      <van-row type="flex" justify="space-around" style="text-align: center">
        <van-col span="12">
          <img src="@/assets/微信1.jpg" alt />
        </van-col>
        <van-col span="12">
          <img src="@/assets/支付.jpg" alt />
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { Dialog } from "vant";
export default {
  computed: {
    ...mapState(["myMoney"]),
  },
  data() {
    return {
      active: 0,
      State: 99,
      moneys1: [100, 200, 300, 500],
      moneys2: [100, 200, 300, 500],
      num1: 10,
      num2: 10,
      money1: 0,
      money2: 0,
    };
  },
  methods: {
    dian1(item, index) {
      this.num1 = index;
      this.money1 = item;
    },
    dian2(item, index) {
      this.num2 = index;
      this.money2 = item;
    },
    chong() {
      this.$store.commit("chong", this.money1);
    },
    ti() {
      if (this.myMoney < this.money2) {
        Dialog.alert({
          message: "余额不足",
        }).then(() => {
          // on close
        });
      } else {
        this.$store.commit("ti", this.money2);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/.van-tabs__nav--card {
  margin: 0;
}
.dian {
  button {
    background: red;
    color: white;
  }
}
.yue {
  width: 100%;
  height: 150px;
  margin-top: 20px;
  background: rgb(104, 104, 223);
  p {
    display: block;
    text-align: center;
    padding: 20px 0;
    color: white;
    font-size: 16px;
  }
  h3 {
    text-align: center;
    padding-top: 15px;
    font-size: 36px;
    color: white;
  }
}
.span {
  font-size: 14px;
  padding: 15px;
}
button {
  width: 80%;
  height: 40px;
}
.bottom {
  margin-top: 30px;
  span {
    color: #666;
    font-size: 14px;
    padding: 15px;
  }
  img {
    width: 50px;
    height: 50px;
    margin-top: 20px;
  }
}
</style>

